<template>
	<view class="content">
		<view class="video-wrapper">
			<video class="video" :show-center-play-btn="true" :poster="detailData.room_cover" :autoplay="true" :src="detailData.play_url"
			 controls objectFit="fill"></video>
		</view>
		<!-- 评论 -->
		<!-- 顶部选项卡 -->
		<scroll-view id="nav-bar" class="nav-bar" scroll-x scroll-with-animation :scroll-left="scrollLeft">
			<view v-for="(item,index) in tabBars" :key="item.liveid" class="nav-item" :class="{current: index === tabCurrentIndex}"
			 :id="'tab'+index" @click="changeTab(index,item.liveid)">{{item.name}}</view>
		</scroll-view>
		<!-- 内容部分 -->
		<swiper id="swiper" class="swiper-box" :duration="300" :current="tabCurrentIndex" @change="changeTab">
			<swiper-item v-for="(tabItem,ids) in tabBars" :key="ids">
				<scroll-view class="panel-scroll-box" :scroll-y="enableScroll">
					<!-- 聊天 -->
					<view v-if="ids==0">
						<u-empty style="padding-top: 200rpx;" v-show="evaList.length==0" :text="$t('video.Commentempty')" mode="message"></u-empty>
						<view v-show="evaList.length>0" class="box-soke" v-for="(bositem,indeis) in evaList" :key="indeis">
							<view class="item right" v-if="uid==bositem.user.uid">
								<image class="header-img" :src="bositem.user.avatar" />
								<view>
									<view>
										<text style="padding: 9px 10px 0px;float: right;">{{bositem.user.nickname}}</text>
									</view>
									<view>
										<text class="message" style="">{{bositem.msg}}</text>
									</view>
								</view>
							</view>

							<!-- <view class="soke-item">欢迎xxx进入直播间</view> -->
							<view class="item left" v-if="uid!=bositem.user.uid">
								<image class="header-img" :src="bositem.user.avatar" />
								<view>
									<view>
										<text style="padding: 9px 0px 9px 10px;">{{bositem.user.nickname}}</text>
									</view>
									<view>
										<text class="message">{{bositem.msg}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 介绍 -->
					<view v-if="ids==1" style="background-color: #fff;height: 100%;padding: 20rpx;">
						<view class="introduce">
							<view class="introduce_img">
								<image v-if="detailData.avatar_url" :src="detailData.avatar_url" mode=""></image>
								<image v-if="!detailData.avatar_url" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1575568780,3963509117&fm=15&gp=0.jpg"
								 mode=""></image>
							</view>
							<view class="introduce_tltle">
								<view>
									{{detailData.name}}</view>
								<!-- <text>{{detailData.view_count}}{{$t('detailss.read')}}</text> -->
								<text>{{$i18n.locale=='en'?utils.timeTodate('m-d H:i', detailData.time_begin):utils.friendlyDate(detailData.time_begin) }}</text>
							</view>
							<button @click="followClock" style="padding: 10rpx 40rpx;" type="error" size="medium">{{detailData.follow===true?$t('video.concerned'):$t('video.follow')}}</button>
						</view>
						<view style="color: #b4b8bf;">{{$t('video.details.abstract')}}：{{detailData.room_describe}}</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		</mix-pulldown-refresh>
		<u-toast ref="uToast" />
		<!--  -->
		<mixLoading class="mix-loading" v-if="loading"></mixLoading>
		<!-- 分享 -->
		<u-popup v-model="show" mode="bottom" closeable length="20%">
			<view class="showqqwe">
				<view @click="shareClick('qq')">
					<u-icon name="qq-circle-fill" color="#ffba2d" size="150"></u-icon>
					<text>QQ</text>
				</view>
				<view @click="shareClick('wx')">
					<u-icon name="weixin-circle-fill" color="#00d100" size="150"></u-icon>
					<text>{{$t('detailss.WeChat')}}</text>
				</view>
			</view>
		</u-popup>
		<view class="bottom">
			<view class="input-box">
				<u-icon name="chat" color="#bcbabb" size="35"></u-icon>
				<input v-model="add_content" cursor-spacing="10" class="input" type="text" :placeholder="$t('detailss.commenton')" placeholder-style="color:#adb1b9;" />
			</view>
			<text @click="contentClick" class="confirm-btn">{{$t('detailss.submit')}}</text>
			<u-icon @click="show = true" style="margin-left: 10rpx;" name="share" color="#adb1b9" size="40"></u-icon>
		</view>
	</view>
</template>

<script>
	import {
		getToken,
		getLanguage
	} from '@/util/tokeCookien.js'
	import utils from '@/components/shoyu-date/utils.filter.js';
	import mixLoading from '@/components/mix-loading/mix-loading';
	let windowWidth = 0,
		scrollTimer = false,
		tabBar;
	export default {
		components: {
			mixLoading
		},
		data() {
			return {
				loading: true,
				show: false,
				uid: 0,
				utils: utils,
				add_content: '',
				evaList: [], //评论数组
				detailData: {}, //
				tabCurrentIndex: 0,
				enableScroll: true,
				scrollLeft: 0, //顶部选项卡左滑距离
				tabBars: [{
						liveid: 1,
						name: '评论',
						newsList: []
					},
					{
						liveid: 2,
						name: '介绍',
						newsList: []
					}
				],
				page_index: 1, //当前页数
			}
		},
		onLoad(options) {
			var token = escape(getToken().token)
			const _this = this
			this.uid = getToken().uid
			this.news_id = options.roomid
			this.loadNewsList()
			var urls = `ws://193.112.24.180:8081/ws?token=${token}&room=${options.roomid}`

			uni.connectSocket({
				url: urls
			});
			uni.onSocketOpen(function(res) {
				console.log('WebSocket连接已打开！');
			});

			uni.onSocketMessage(function(res) {
				//this.evaList= JSON.parse(res.data.data)
				let datalis = JSON.parse(res.data)
				console.log('收到服务器内容：' + datalis.data.msg);
				_this.evaList.push(datalis.data)
			});
			uni.onSocketError(function(res) {
				console.log('WebSocket连接打开失败，请检查！');
			});
			if (this.$i18n.locale == 'en') {
				this.tabBars[0].name = 'Comment'
				this.tabBars[1].name = 'Introduce'
			}
		},
		methods: {
			//分享
			shareClick(type) {
				let typevideo = ''
				this.detailData.room_describe == null ? typevideo = '' : typevideo = this.detailData.room_describe
				const _this = this
				let deta_url =
					`http://www.aseantop.net/from=singlemessage#/dm/videoDetail?vid=${this.news_id}&type=1&from=app&langid=${getLanguage()}`
				if (type == 'qq') {
					uni.share({
						provider: 'qq',
						type: 1,
						scene: "WXSenceTimeline",
						href: deta_url,
						title: this.detailData.room_name,
						summary: typevideo,
						imageUrl: this.detailData.room_cover,
						success: function(response) {
							console.log("success:" + JSON.stringify(response));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
							uni.showToast({
								title: _this.$i18n.messages[_this.$i18n.locale].detailss.Failedshare,
								position: 'bottom'
							})
						}
					})
				} else {
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 4,
						//href: deta_url,
						title: this.detailData.room_name,
						summary: typevideo,
						imageUrl: this.detailData.room_cover,
						mediaUrl: deta_url,
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
							uni.showToast({
								title: this.$i18n.messages[this.$i18n.locale].detailss.Failedshare,
								position: 'bottom'
							})
						}
					});
				}
			},
			//关注
			async followClock() {
				const res = await this.$myRequest({
					url: '/user/follow',
					method: 'post',
					header: {},
					data: {
						up_uid: this.detailData.room_user.user_id
					}
				})
				if (res.code == 200) {
					let operation = ''
					res.data.operation == 1 ? operation = this.$i18n.messages[this.$i18n.locale].pressrelease.Focusok : operation =
						this.$i18n.messages[this.$i18n.locale].pressrelease.CancelFocus
					this.$refs.uToast.show({
						title: operation,
						type: 'success'
					})
					this.detailData.follow = !this.detailData.follow
				} else {
					this.$refs.uToast.show({
						title: this.$i18n.messages[this.$i18n.locale].pressrelease.unknownerror,
						type: 'error'
					})
				}
				console.log(res)
			},
			//添加评论
			async contentClick() {
				if (this.add_content == '') return
				let masg = JSON.stringify({
					type: "message",
					msg: this.add_content
				})
				uni.sendSocketMessage({
					data: masg
				});
			},
			//获取直播
			async loadNewsList() {
				const _this = this
				const res = await this.$myRequest({
					url: '/live/get-liveroom-detail/' + this.news_id,
					header: {}
				})
				setTimeout(() => {
					console.log(res)
					_this.detailData = res.data
					_this.detailData.name = res.data.room_user.name
					_this.detailData.avatar_url = res.data.room_user.avatar_url
					console.log(_this.detailData)
					_this.loading = false;
				})
			},
			//tab切换
			async changeTab(e, channelId) {
				if (scrollTimer) {
					//多次切换只执行最后一次
					clearTimeout(scrollTimer);
					scrollTimer = false;
				}
				let index = e;
				//e=number为点击切换，e=object为swiper滑动切换
				if (typeof e === 'object') {
					index = e.detail.current
				}
				if (typeof tabBar !== 'object') {
					tabBar = await this.getElSize("nav-bar")
				}
				//计算宽度相关
				let tabBarScrollLeft = tabBar.scrollLeft;
				let width = 0;
				let nowWidth = 0;
				//获取可滑动总宽度
				for (let i = 0; i <= index; i++) {
					let result = await this.getElSize('tab' + i);
					width += result.width;
					if (i === index) {
						nowWidth = result.width;
					}
				}
				if (typeof e === 'number') {
					//点击切换时先切换再滚动tabbar，避免同时切换视觉错位
					this.tabCurrentIndex = index;
				}
				//延迟300ms,等待swiper动画结束再修改tabbar
				scrollTimer = setTimeout(() => {
					if (width - nowWidth / 2 > windowWidth / 2) {
						//如果当前项越过中心点，将其放在屏幕中心
						this.scrollLeft = width - nowWidth / 2 - windowWidth / 2;
					} else {
						this.scrollLeft = 0;
					}
					if (typeof e === 'object') {
						this.tabCurrentIndex = index;
					}
					this.tabCurrentIndex = index;


					//第一次切换tab，动画结束后需要加载数据
					let tabItem = this.tabBars[this.tabCurrentIndex];
					if (this.tabCurrentIndex !== 0 && tabItem.loaded !== true) {
						this.loadNewsList('add');
						tabItem.loaded = true;
					}
				}, 10)

			},
			//获得元素的size
			getElSize(id) {
				return new Promise((res, rej) => {
					let el = uni.createSelectorQuery().select('#' + id);
					el.fields({
						size: true,
						scrollOffset: true,
						rect: true
					}, (data) => {
						res(data);
					}).exec();
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.content {
		display: flex;
		flex-direction: column;
		height: 100%;
		background: #fff;
	}

	.video-wrapper {
		height: 500rpx;
		padding-top: 25px;
		background-color: #000000;

		.video {
			width: 100%;
			height: 100%;
		}
	}

	.scroll {
		flex: 1;
		position: relative;
		background-color: #f8f8f8;
		height: 0;
	}

	/* 简介 */
	.introduce-section {
		display: flex;
		flex-direction: column;
		padding: 20upx 30upx;
		background: #fff;
		line-height: 1.5;

		.title {
			font-size: 36upx;
			color: #303133;
			margin-bottom: 16upx;
		}

		.introduce {
			display: flex;
			font-size: 26upx;
			color: #909399;

			.show-icon {
				font-size: 34upx;
				padding-left: 10upx;
			}
		}
	}

	.mix-loading {
		transform: translateY(140upx);
	}

	/* 底部 */
	.bottom {
		position: fixed;
		width: 100%;
		background-color: #fff;
		bottom: 0;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		height: 90rpx;
		padding: 0 30rpx;
		box-shadow: 0 -1px 3px rgba(0, 0, 0, .04);
		z-index: 1;

		.input-box {
			display: flex;
			align-items: center;
			flex: 1;
			height: 60rpx;
			background: #f2f3f3;
			border-radius: 100px;
			padding-left: 30rpx;

			.icon-huifu {
				font-size: 28rpx;
				color: #909399;
			}

			.input {
				padding: 0 20rpx;
				font-size: 28rpx;
				color: #303133;
			}
		}

		.confirm-btn {
			font-size: 30rpx;
			padding-left: 20rpx;
			color: #0d9fff;
		}
	}

	/* 顶部tabbar */
	.nav-bar {
		position: relative;
		z-index: 10;
		height: 90rpx;
		line-height: 90rpx;
		white-space: nowrap;
		box-shadow: 0 2upx 8upx rgba(0, 0, 0, .06);
		background-color: #fff;

		.nav-item {
			display: inline-block;
			width: 150upx;
			height: 90upx;
			padding: 0 20rpx;
			text-align: center;
			line-height: 90upx;
			font-size: 30upx;
			color: #303133;
			position: relative;

			&:after {
				content: '';
				width: 0;
				height: 0;
				border-bottom: 4upx solid #ed4141;
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				transition: .3s;
			}
		}

		.current {
			color: #ed4141;

			&:after {
				width: 50%;
			}
		}
	}

	.swiper-box {
		height: 54%;
	}

	.panel-scroll-box {
		height: 100%;
		background-color: #e2e6ef;
	}

	/* 介绍 */
	.introduce {
		background-color: #fff;
		margin-bottom: 30rpx;
		display: flex;
		font-size: 26rpx;
		color: #909399;
		justify-content: center; //子元素水平居中
		align-items: center; //子元素垂直居中

		.introduce_img {
			flex: 1;
			border-radius: 50px;

			image {
				border-radius: 50px;
				width: 100rpx;
				height: 100rpx;
			}
		}

		.introduce_tltle {
			text {
				margin-right: 16rpx;
			}

			margin-left: 30rpx;
			flex: 4;

			view {
				font-weight: 600;
				font-size: 40rpx;
				color: #000000;
			}
		}

		button {
			flex: 2;
			height: 60rpx;
			line-height: 45rpx;
			font-size: 30rpx;
			background-color: #ed4141;
			color: #fff;
		}
	}

	/* 聊天 */
	.box-soke {
		padding: 30rpx;
		padding-bottom: 60rpx;
	}

	.item {
		display: flex;
		margin-bottom: 10px;
	}

	.left {
		flex-direction: row;
	}

	.right {
		flex-direction: row-reverse;
	}

	.right .message {
		margin-right: 10px;
	}

	.left .message {
		margin-left: 10px;
	}

	.header-img {
		width: 42px;
		height: 42px;
		border-radius: 100px;
	}

	.message {
		border-radius: 10px;
		display: inline-block;
		background: #efefef;
		min-height: 25px;
		padding: 9px 10px;
		color: #222121;
	}

	.soke-item {
		text-align: center;
		margin: 20rpx 0;
		display: flex;
		justify-content: center;
		border-radius: 20px;
		background-color: #cfcfcf;
		color: #fff;
	}

	/* 底部弹框 */
	.showqqwe {
		display: flex;
		margin-top: 50rpx;

		view {
			text-align: center;
			flex: 1;
			justify-content: center;

			text {
				display: block;
			}
		}
	}
</style>
